<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ultra Exquisite Login Page</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> <!-- 引入动画库 -->
  <script src="vue.js"></script>
  <script src="axios.js"></script>
  <script src="elementui.js"></script>
  <script src="common.js"></script>
</head>

<style>
    body {
  background: linear-gradient(to bottom right, #ff99cc, #ff6699);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
  overflow: hidden;
  animation: gradientChange 10s infinite linear; /* 背景渐变颜色动态变化动画 */
}

@keyframes gradientChange {
  0% {
    background: linear-gradient(to bottom right, #ff99cc, #ff6699);
  }
  25% {
    background: linear-gradient(to bottom right, #ff6699, #ff3366);
  }
  50% {
    background: linear-gradient(to bottom right, #ff3366, #e6004d);
  }
  75% {
    background: linear-gradient(to bottom right, #e6004d, #cc0033);
  }
  100% {
    background: linear-gradient(to bottom right, #ff99cc, #ff6699);
  }
}

.login-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.login-card {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  padding: 30px;
  width: 350px;
  text-align: center;
  transform-style: preserve-3d;
  animation: fadeInCard 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards, rotateCard 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  position: relative;
  overflow: hidden; /* 隐藏超出部分，用于后面的动画效果 */
}

@keyframes fadeInCard {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes rotateCard {
  0% {
    transform: rotateY(30deg) translateX(-100px);
  }
  100% {
    transform: rotateY(0deg) translateX(0);
  }
}

.logo-container {
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeInLogo 0.8s ease-in-out 0.5s forwards;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.logo {
  width: 80px;
  height: auto;
  transition: transform 0.3s ease; /* 为 logo 添加交互时的动画过渡 */
}

.logo:hover {
  transform: rotate(360deg) scale(1.2); /* 鼠标悬停时 logo 旋转并放大 */
}

h2 {
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
  perspective: 500px;
}

.input-group input {
  width: 100%;
  padding: 15px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 5px 5px 0 0;
  outline: none;
  background-color: transparent;
  transition: border-bottom-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 增加阴影动画过渡 */
}

.input-group input:focus {
  border-bottom-color: #ff99cc;
  transform: translateY(-5px);
  box-shadow: 0 5px 10px rgba(255, 153, 204, 0.3); /* 输入框获取焦点时添加阴影 */
}

.input-group i {
  position: absolute;
  right: 10px;
  top: 15px;
  color: #ccc;
  pointer-events: none;
  transition: color 0.3s ease;
}

.input-group input:focus + i {
  color: #ff99cc;
}

.input-border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #ff99cc;
  transition: width 0.3s ease;
}

.input-group input:focus ~.input-border {
  width: 100%;
}

.input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ccc;
  transform: scaleX(0); /* 初始下划线宽度为0 */
  transform-origin: left; /* 缩放原点在左边 */
  transition: transform 0.3s ease; /* 下划线动画过渡 */
}

.input-group input:focus ~.input-underline {
  transform: scaleX(1); /* 输入框获取焦点时下划线展开 */
}

button {
  width: 100%;
  padding: 15px;
  background-color: #ff99cc;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 15px;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* 增加按钮阴影动画过渡 */
}

button:hover {
  background-color: #ff6699;
  transform: scale(1.05);
  box-shadow: 0 5px 10px rgba(255, 102, 153, 0.3); /* 鼠标悬停时按钮添加阴影 */
}

button:active {
  transform: scale(0.98);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); /* 按钮按下时添加内阴影，模拟按压效果 */
}

.forgot-password {
  color: #ff99cc;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password:hover {
  color: #ff6699;
}

/* 新增闪烁动画效果，用于登录成功/失败提示等（这里假设后续添加相关功能可以使用） */
@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 模拟星空背景效果 */
@keyframes starTwinkle {
  0% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background-color: white;
  border-radius: 50%;
  animation: starTwinkle 3s infinite ease-in-out; /* 星星闪烁动画 */
}
</style>
<body>
  <div id="app">
    <div class="login-wrapper">
      <div class="login-card">
        <h2 class="animate__animated animate__fadeInDown">欢迎登录!</h2>
        <form @submit.prevent="handleLogin" :model="user">
          <div class="input-group animate__animated animate__fadeInUp">
            <input type="text" placeholder="用户名" v-model="user.uname" required>
            <i class="fas fa-user"></i>
            <span class="input-border"></span>
            <span class="input-underline"></span> <!-- 新增下划线元素用于动画 -->
          </div>
          <div class="input-group animate__animated animate__fadeInUp" data-delay="0.2s"> <!-- 添加延迟属性 -->
            <input type="password" placeholder="密码" v-model="user.upwd" required>
            <i class="fas fa-lock"></i>
            <span class="input-border"></span>
            <span class="input-underline"></span>
          </div>
          <button type="submit" class="animate__animated animate__fadeInUp" data-delay="0.4s">登录  </button>
          <p class="forgot-password animate__animated animate__fadeInUp" data-delay="0.6s">忘记密码?</p>
        </form>
      </div>
    </div>
  </div>

</body>
<script>
  const body = document.body;
  for (let i = 0; i < 100; i++) {
    const star = document.createElement('div');
    star.className ='star';
    star.style.top = Math.random() * window.innerHeight + 'px';
    star.style.left = Math.random() * window.innerHeight + 'px';
    body.appendChild(star);
  }
  new Vue({
  el: '#app',
  data:{
    user: {
      uname: '',
      upwd: ''
    },
  },
    
  methods: {
    handleLogin() {
      //调用登录ajax
      axios.post(API+'loginUser',this.user)
        .then(response => {
          alert(JSON.stringify(response))
          if(response.data.code==200){
            let token = response.data.data.token;
            //把token保存到本地
            window.localStorage.setItem('token',token);
            window.location.href="menu.html"
            alert(token)
          }else{
            this.$message.error("出错了")
          }
        })
               
    }
  }
});
</script>
</html>